<template>
    <div id="pai">
        <el-row  type="flex" :gutter="20" justify="start">
            <el-col :span="1" ></el-col>
            <el-col :span="16" >
                <el-card :body-style="[{ padding: '0px',margin:'20px'}]">
                    <el-container>
                        <el-aside width="200px">
                            <img :src="obj.image" fit='contain' class="image">
                            <img style="width: 100px; height: 100px;margin-top: 5px;border: 2px red solid" :src="obj.image" fit='scale-down' class="image">
                        </el-aside>
                            <el-container>
                                <el-header style='background-color: white;color: black;'>
                                    {{obj.productName}}
                                    <el-tag style="margin-right:5px" effect="dark" type="danger"><span>{{obj.status=='SELL'?'正在拍卖':obj.status=='SELL_OUT'?'已拍卖':obj.status=='DOWN'?'下架':'流拍'}}</span></el-tag>
                                    <el-button type="danger" style='margin-left: 40px' icon="el-icon-star-off" circle></el-button>
                                    <el-tag style='float: right;' class="el-icon-user-solid" type="info">围观次数：<span>{{obj.hot}}</span></el-tag>
                                </el-header>
                                <el-main>
                                    <el-tag type="danger" effect='light'> 当前价格：<span>{{record==''?obj.basePrice:record.slice(-1)[0].money}}</span></el-tag><br/>
                                    <el-tag type="danger" effect='light'> 需缴纳保证金：<span>{{obj.transactionPrice/10}}</span></el-tag><br/>
                                <el-tag type="danger"  v-if="obj.status=='SELL'?true:false"> 剩余：<time class="time" >{{ time }}</time></el-tag>
                                <el-tag type="danger" effect='dark' size="medium">结束时间：{{obj.deadline}}</el-tag>
                                </el-main>
                                <el-footer>
                                    <el-row>
                                        <el-tag type="danger" style="margin-right:15px" effect='light'> 需缴纳金额：<span>{{record==''?obj.basePrice+obj.bond:record.slice(-1)[0].money+obj.bond+10}}</span></el-tag>
                                        <el-button type="danger" @click='pai' :disabled="obj.status=='SELL'?false:true">参与竞拍</el-button>
                                        <el-button style='margin-left: 40px'>在线融资申请</el-button>
                                    </el-row>
                                </el-footer>
                            </el-container>
                    </el-container>   
                </el-card>
                <br>
                
            </el-col>
            <el-col :span="1" ></el-col>
            <el-col :span="6" >
                <el-card :body-style="[{ padding: '0px',margin:'20px'}]">
                    <div slot="header" class="clearfix">
                        <span>相关文章</span>
                        <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
                    </div>
                    <div v-for="art in articls" :key="art.id" class="text item">
                        {{art.title}}
                    </div>
                </el-card>
            </el-col>
            
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'pai',
    data() {
        return {
          time : '',
          endTime:'',
          flag : false,
          obj:'',
          parameter:'',
          tableData: [],
          record:[],
          articls:'',
        }
    },
    created(){  //生命周期里接收参数
        if(this.$route.query.obj=={}){
            this.obj = this.$cookies.get('product');
            this.record = this.$cookies.get('record');
        }else{
            this.obj = this.$route.query.obj;
            this.record = this.$route.query.record;
        }
        console.log(this.obj);
        //接受参数关键代码
        this.$cookies.set('product',this.obj,{expires:60000,path:''});   //return this
        this.$cookies.set('record',this.record,{expires:60000,path:''});
         //获取相关文章
        this.$ax.get('/epai/artical/getartical',{params:{
            cid:this.obj.cid
        }}).then((response)=>{
                if (response.status == 200 && response.data.success) {
                let a =  response.data.data;
                this.articls = a;
            }
        }).catch(error => {
            console.error(error);
        });
        //获取竞价记录
        this.$ax.get('/epai/auction-record/getrecord',{params:{
              pid:this.obj.id
          }}).then((response)=>{
                if (response.status == 200 && response.data.success) {
                  let a =  response.data.data;
                  this.record = a;
                  console.log(this.record);
              }
          }).catch(error => {
              console.error(error);
          });
    },
    mounted(){
        let time = setInterval(()=>{
            if(this.flag == true){
                clearInterval(time)
            }
            this.timeDown(this.obj.deadline)
        },1000)
    },
    methods:{
      timeDown (times) {
        const endTime = new Date(times)
        const nowTime = new Date();
        let leftTime = parseInt((endTime.getTime()-nowTime.getTime())/1000)
        let d = parseInt(leftTime/(24*60*60))
        let h = this.formate(parseInt(leftTime/(60*60)%24))
        let m = this.formate(parseInt(leftTime/60%60))
        let s = this.formate(parseInt(leftTime%60))
        if(leftTime <= 0){
          this.flag = true;
          this.time = `已结束`;
          return;
        }
        this.time = `${d}天${h}小时${m}分${s}秒`;
      },
      formate (time) {
        if(time>=10){
          return time
        }else{
          return `0${time}`
        }
      },
      tableRowClassName({row, rowIndex}) {
        if (row.isVIP === 1) {
          return 'warning-row';
        }
        return '';
      },
      pai(){
         this.obj.money = this.record==''?this.obj.basePrice+this.obj.bond:this.record.slice(-1)[0].money+this.obj.bond+10;
        this.obj.uid = sessionStorage.getItem("uid");
        this.obj.notifyUrl =  window.location.href ;
        //竞价
        this.$ax.post("/epai/auction-record/addrecord",this.obj).then((resp) => {
          // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
          // const divForm = document.getElementsByTagName("div");
          // if (divForm.length) {
          //   document.body.removeChild(divForm[0]);
          // }
          if(resp.data.success){
            this.$message({
              showClose: true,
              message: '竞价成功',
              type: 'sucesses'
            });
          }else{
            console.log();
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'sucesses'
            });
          }
          this.$router.go(0);
          });    
      }
      
    },

}
</script>
<style>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>

<style>

  .el-header, .el-footer {
    background-color: white;
    color: white;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    margin-left: 40px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>